<template>
  <view class="container">
    <tui-list-view title="阅读界面" class="tui-list-view">
      <tui-list-cell class="tui-list tui-flex">
        <image src="/static/images/stories/Moon.png" class="logo" mode="widthFix" />
        <text class="tui-list-cell-name tui-flex-1">夜间模式</text>
        <switch
          class="list-cell-switch"
          color="#6cc"
          :checked="config.isNight"
          @change="switchNight"
        />
      </tui-list-cell>
      <tui-list-cell @click="switchSleep" :arrow="true" class="tui-list">
        <tui-icon name="clock-fill" size="40" :rpx="true" color="#5677fc"></tui-icon>
        <view class="tui-list-cell-name">休眠时间</view>
        <view class="tui-right">{{ config.sleep }}分钟</view>
      </tui-list-cell>
      <tui-list-cell @click="switchAnimate" :arrow="true" class="tui-list">
        <tui-icon name="strategy" size="40" :rpx="true" color="#19be6b"></tui-icon>
        <view class="tui-list-cell-name">翻页动画</view>
        <view class="tui-right">{{ config.animate }}</view>
      </tui-list-cell>
    </tui-list-view>

    <tui-list-view class="tui-list-view">
      <tui-list-cell @click="goAbout" :arrow="true" last="true" class="tui-list">
        <image src="/static/images/my/logo.png" class="logo" mode="widthFix" />
        <text class="tui-list-cell-name">关于</text>
        <view class="tui-right">DT阅读</view>
      </tui-list-cell>
    </tui-list-view>
  </view>
</template>

<script>
import tuiListView from "@/components/list-view/list-view";
import tuiListCell from "@/components/list-cell/list-cell";
import tuiIcon from "@/components/icon/icon";
import { mapState, mapMutations } from "vuex";
import { equalObj } from "@/utils/util";

export default {
  components: { tuiListView, tuiListCell, tuiIcon },
  data() {
    return {
      oldConfig: {}
    };
  },
  computed: {
    ...mapState(["config"])
  },
  onShow() {
    this.oldConfig = this.config;
  },
  onHide() {
    this.saveConfig();
  },
  onUnload() {
    this.saveConfig();
  },
  methods: {
    ...mapMutations(["setConfig"]),
    saveConfig() {
      if (this.config._id && !equalObj(this.oldConfig, this.config)) {
        const config = { ...this.config };
        delete config._id;
        delete config._openid;
        this.db
          .collection("config")
          .doc(this.config._id)
          .update({
            data: config
          })
          .then(res => {
            console.log("saveConfig", res);
          });
      }
    },
    switchNight() {
      this.setConfig({ isNight: !this.config.isNight });
    },
    switchSleep() {
      uni.showActionSheet({
        itemList: ["1分钟", "5分钟", "永亮"],
        success: res => {
          switch (res.tapIndex) {
            case 0:
              this.setConfig({ sleep: 1 });
              break;
            case 1:
              this.setConfig({ sleep: 5 });
              break;
            case 2:
              this.setConfig({ sleep: 0 });
              break;
            default:
              break;
          }
        }
      });
    },
    switchAnimate() {
      const itemList = ["上下", "平移", "none"];
      // const itemList = ["上下", "淡入", "平移", "滑动", "none"];
      uni.showActionSheet({
        itemList,
        success: res => {
          // this.tui.toast("暂无此功能");
          this.setConfig({ animate: itemList[res.tapIndex] });
        }
      });
    },
    goAbout() {
      uni.navigateTo({
        url: "/pages/about/about"
      });
    }
  }
};
</script>

<style>
.container {
  padding-bottom: env(safe-area-inset-bottom);
}

.tui-list-view {
  padding-top: 10upx !important;
}

.tui-list-cell-name {
  padding-left: 20upx;
  vertical-align: middle;
  line-height: 30upx;
}
.list-cell-switch {
  transform: scale(0.7);
}

.tui-list::after {
  left: 94upx !important;
}

.tui-right {
  margin-left: auto;
  margin-right: 34upx;
  font-size: 26upx;
  line-height: 1;
  color: #999;
}
.logo {
  height: 40upx;
  width: 40upx;
}
</style>
